/*
 * @Descripttion: 路由配置
 * @version:
 * @Author: lhl
 * @Date: 2024-11-16 23:22:22
 * @LastEditors: lhl
 * @LastEditTime: 2024-11-18 21:10:44
 */

// createBrowserRouter, createHashRouter,两种常用模式
import { lazy } from 'react';
import { Navigate, useRoutes } from 'react-router-dom';
import Login from '@/views/login/Login';
import NotForbid from '@/views/403/403';
import NotFound from '@/views/404/404';
import Dashboard from '@/views/dashboard/Dashboard';
import AppLayout from '@/layout';
import { lazyLoad } from './LazyLoad'; // 懒加载

// Lazy load components
const System = {
  User: lazy(() => import('@/views/system/user')),
  Role: lazy(() => import('@/views/system/role')),
  Menu: lazy(() => import('@/views/system/menu')),
  Dept: lazy(() => import('@/views/system/dept')),
  Dict: lazy(() => import('@/views/system/dict')),
};

// 多级菜单
const MultiLevel = {
  Level1: lazy(() => import('@/views/multi-level/level1')),
  Level2: lazy(() => import('@/views/multi-level/children/level2')),
  Level31: lazy(() => import('@/views/demo/multi-level/children/children/level3-1')),
  Level32: lazy(() => import('@/views/demo/multi-level/children/children/level3-2')),
};
const routes = [
  {
    path: '/',
    element: <Navigate to="/dashboard" />,
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/',
    element: <AppLayout />,
    children: [
      {
        path: '/dashboard',
        element: <Dashboard />,
      },
      {
        path: 'system',
        children: [
          { path: '/system/user', element: lazyLoad(System.User) },
          { path: '/system/role', element: lazyLoad(System.Role) },
          { path: '/system/menu', element: lazyLoad(System.Menu) },
          { path: '/system/dept', element: lazyLoad(System.Dept) },
          { path: '/system/dict', element: lazyLoad(System.Dict) },
        ],
      },
      // 三级菜单
      {
        path: 'multi-level',
        children: [
          {
            path: 'multi-level1',
            element: lazyLoad(MultiLevel.Level1),
            children: [
              {
                path: 'multi-level2',
                element: lazyLoad(MultiLevel.Level2),
                children: [
                  {
                    path: 'multi-level3-1',
                    element: lazyLoad(MultiLevel.Level31),
                  },
                  {
                    path: 'multi-level3-2',
                    element: lazyLoad(MultiLevel.Level32),
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
  {
    path: '/404',
    element: <NotFound />,
  },
  {
    path: '/403',
    element: <NotForbid />,
  },
  {
    path: '*',
    element: <Navigate to="/404" />,
  },
];

// api路由 对应 RouterProvider
// const router = createBrowserRouter(routes, {
//   // React Router v7 引入了一个新的行为，即 formMethod 字段的大小写会被规范化为大写
//   // React Router 提供了一个未来标志 v7_normalizeFormMethod，可以通过设置这个标志来启用新行为
//   future: {
//     v7_normalizeFormMethod: true,
//   },
// });

// export default router;

// 组件路由 hook api加载
export default function Router() {
  return useRoutes(routes);
}
